import {Button,Card,Row,Col,Table,Input,Image} from 'antd'
import {useState,useEffect} from 'react'
// 导入获取店铺接口
import { getProducts} from '@/api/channel'
interface IProps {
  isShow: boolean;
  // setIsShow: (isShow: boolean) => void;
  onOk: (rightList:any) => void;
  onCancel?: () => void;
}
const columns = [
  {
    title: '商品编号',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '商品名称',
    dataIndex: 'productName',
    key: 'productName',
  },
  {
    title: '图片',
    dataIndex: 'gallery',
    key: 'gallery',
    render: (text: string) => <Image src={text.split(",")[0]} style={{ width: 50, height: 50 }} />,
  },
  {
    title: '价格',
    dataIndex: 'originalPrice',
    key: 'originalPrice',
  },
  {
    title: '规格',
    dataIndex: 'specs',
    key: 'specs',
  }
  
]
function SelectShop({ isShow, onOk, onCancel }: IProps) {
  // 查询参数
  const [params, setParams] = useState({current:1,size:10,productName:'',id:'',specs:''});
  // 左边表格数据
  const [leftList,setLeftList] = useState([]);
  // 右边表格数据
  const [rightList,setRightList] = useState([]);
  // 左边表格选中数据
  const [leftSel,setLeftSel] = useState([]);
  // 右边表格选中数据
  const [rightSel,setRightSel] = useState([]);
  //  分页数据
  const [pagination,setPagination] = useState({});

  // 定义搜索方法
  const search = () => {
    console.log(params,'params')
    getProducts(params).then((res:any) => {
      if(res.data.code === 0){
      setLeftList(res.data.data);
      setPagination({...res.data.pagination});
      setParams({...params,current:res.data.pagination.current,size:res.data.pagination.size});
      }
    })
  }
  // 组件挂载完毕默认执行search
  useEffect(() => {
    if(isShow){
      search();
    }
  }, [isShow,params.current,params.size]);
// 当isShow变化并为true时，执行search方法
// 当params.current变化时，执行search方法
// -----------------------选表格左边
const onLeftSelectChange = (newSelectedRowKeys: React.Key[],newSelectedRow:any) => {
  console.log('newSelectedRow: ', newSelectedRow);
  setLeftSel(newSelectedRow);
};
// 选择右边表格
const onRightSelectChange = (newSelectedRowKeys: React.Key[],newSelectedRow:any) => {  
  setRightSel(newSelectedRow);
};
const rowSelection = {
  // 选中的数据
  selectedRowKeys: leftSel.map((item:any) => item.id),
  onChange: onLeftSelectChange,
};
const rowSelectionRight = {
  // 选中的数据
  selectedRowKeys: rightSel.map((item:any) => item.id),
  onChange: onRightSelectChange,
};

// -----------------------选表格左边ed
// -----------------------toRight 左边添加到右边
const toRight = () => {
  // 把左边选中的数据添加到右边，和右边的数据合并
  setRightList(unique([...rightList,...leftSel]));
  // 对右边的数据按id去重
  // 把左边选中的数据从左边删除
  // 把左边的数据过滤：过滤规则是：如果左边的数据不在左边选中的数据中，就保留
  setLeftList(leftList.filter((item) => !leftSel.includes(item)));
  // 清空左边选中的数据
  setLeftSel([]);
}
// 添加到右边
const toLeft = () => {
  // 把右边的选中的数据添加到左边
  setLeftList(unique([...leftList,...rightSel]));
  setRightList(rightList.filter((item) => !rightSel.includes(item)));
  setRightSel([]);
}
// 按id去重
function unique(arr: any) {
  // item 当前被遍历的元素，index 当前被遍历的元素的索引，arr 当前被遍历的数组
  return arr.filter((item:any,index:number)=>{
      // 返回true保留，返回false删除
      // findIndex：找到返回索引，找不到返回-1
      var ind = arr.findIndex((value:any)=>value.id===item.id);
      // 如果当前元素的索引和找到的索引相等，说明是第一次出现，保留
      return ind===index;
  })

}

  return (<>
  {isShow &&<div className="SelectShop">
  <div className="content">
    <Card className="left" title="选择商品">
        <div className='params'>
          <Row>
            <Col span={12}>
              <label > 商品id：</label>
             
              <Input value={params.id} onChange={e=>setParams({...params,id:e.target.value})}></Input>
            </Col>
            <Col span={12}> <label > 商品名称： </label > 
            <Input value={params.productName} onChange={e=>setParams({...params,productName:e.target.value})}></Input>
            </Col>
          </Row>
          <Row>
            <Col span={12}> <label > 规格： </label > 
            <Input value={params.specs} onChange={e=>setParams({...params,specs:e.target.value})}></Input>
            </Col>
            <Col span={12} ><Button style={{marginLeft:100}} onClick={search}>搜索</Button></Col>
          </Row>
        </div>
        <div className='table'>
          <Table 
           rowSelection={rowSelection}
          size='small'
          onChange={(pagination, filters, sorter) => {  
            setParams({...params,current:Number(pagination.current),size:Number(pagination.pageSize)});
          }}
          pagination={pagination}
          dataSource={leftList} rowKey="id" columns={columns}/>
        </div>
    </Card>
    <div className="center">
      <Button onClick={toRight}>添加&gt;&gt;</Button>
      <Button onClick={toLeft}>&lt;&lt;取消</Button>
    </div>
    <Card className="right" title="已选店铺">
    <Table 
          size='small'  
          rowSelection={rowSelectionRight}             
          dataSource={rightList} rowKey="id" columns={columns}/>
    </Card>
  </div>
  <div className="footer">
  <Button onClick={onCancel}>取消</Button>
  <Button type='primary' onClick={()=>onOk(rightList)}>确定</Button>
  </div>
  
  </div>}
  </>  );
}

export default SelectShop;